<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width">
    <title>加入游戏</title>
    <link rel="stylesheet" href="/home/css/waitfor.css"/>
    <script src="/static/jquery-1.8.3.min.js"></script>
</head>
<body>
<div class="content">
    <img src="/home/imgs/logoutBg.png" alt=""/>
</div>
<div class="main">
    <div class="top">
        <div class="left" id="{{$data['order']['left']}}">
            @if(isset($data['players'][$data['order']['left']]['wxavatar']))
                <img src="{{$data['players'][$data['order']['left']]['wxavatar']}}" alt=""/>
                @endif
            <div style="font-size: 0.7rem;color: #ffffff;padding-left: 10px;">
                <p>{{$data['players'][$data['order']['left']]['wxname']  or ''}}</p>
                <p>{{$data['players'][$data['order']['left']]['point']  or ''}}</p>
            </div>
        </div>
        <div class="center">
            <p>
                <img style="" src="/home/imgs/for_center_bg.png" alt=""/>
            </p>
        </div>
        <div class="right" id="{{$data['order']['right']}}">
            @if(isset($data['players'][$data['order']['right']]['wxavatar']))
            <img src="{{$data['players'][$data['order']['right']]['wxavatar']}}" alt=""/>
            @endif
            <div style="font-size: 0.7rem;color: #ffffff;padding-left: 10px;">
                <p>{{$data['players'][$data['order']['right']]['wxname']  or ''}}</p>
                <p>{{$data['players'][$data['order']['right']]['point']  or ''}}</p>
            </div>
        </div>
    </div>

    <div class="footer">
        <div class="footer_center" style="position: relative" id="{{$data['order']['footer']}}">
            @if(isset($data['players'][$data['order']['footer']]['wxavatar']))
                <img style="width: 7.5%" src="{{$data['players'][$data['order']['footer']]['wxavatar']}}" alt=""/>
            @endif
            <div style="font-size: 0.7rem;color: #ffffff;padding-left: 10px; position: absolute;left:54%;top:10%">
                <p>{{$data['players'][$data['order']['footer']]['wxname']  or ''}}</p>
                <p>{{$data['players'][$data['order']['footer']]['point']  or ''}}</p>
            </div>
        </div>
    <div class="remove">
        <img src="/home/imgs/btn_jsfz.png" alt=""/>
    </div>
    </div>
</div>
    <div class="RoomNumber">
        <p style="color: #01fcd0">09 11</p>
        <p>房间号</p>
        <p>{{$data['room']['pwd']}}</p>
        <p>卡五星</p>
        <p>襄阳玩法</p>
    </div>
<div class="parentAlert" style="display: none">
    <ul class="addPiao">
        <li data="0">
            <img src="/home/imgs/p.png" alt=""/>
        </li>
        <li data="1">
            <img src="/home/imgs/p1.png" alt=""/>
        </li>
        <li data="2">
            <img src="/home/imgs/p2.png" alt=""/>
        </li>
    </ul>
</div>
</body>
<script>
    var wsServer ='ws://192.168.0.199:9502';  //地址
    var ws = new WebSocket(wsServer); //监听链接
    ws.onopen = function (evt) {  //测试链接成功或失败
        //websocket.readyState 属性：
        switch (ws.readyState) {
            case 0: console.log('通信服务未打开');break;
            case 1: console.log('连接成功');break;
            case 2: console.log('通信端口关闭，无法连接');break;
            case 3: console.log('通信服务已关闭');break;
        }
        var joinInfo = {
            'role': '{{$joinInfo['role']}}',
            'rid': '{{$joinInfo['rid']}}',
            'mid': '{{$joinInfo['mid']}}',
            'type': '{{$joinInfo['type']}}',
        };
        ws.send(JSON.stringify(joinInfo));
    };

    ws.onmessage = function (evt) {
        var data = JSON.parse(evt.data);
        console.log(data);
        if (data.type == 1) {
            setPlayer(data);
            if (data.status && data.status == 1) {
                $('.parentAlert').show();
            }
        }
        if (data.type == 2) {
            window.location.href = '{{action('Home\RoomController@getPlay',['role'=>$joinInfo['role'], 'rid'=>$joinInfo['rid'], 'mid'=>$joinInfo['mid']])}}';
        }

        if (data.type == 9) {
            $("#"+data.role).empty();
        }
    }
    
    function setPlayer(data) {
        var pv = $("#"+data.role).find('p').first().text();
        if (pv == undefined || pv == '') {
           var str ='<img src="'+data.member.wxavatar+'" alt=""/>'
                   +'<div style="font-size: 0.7rem;color: #ffffff;padding-left: 10px;">'
                   +'<p>'+data.member.wxname+'</p><p>'+data.member.point+'</p></div></div>';
           $("#"+data.role).empty().append(str);
        }
    }
    $('.parentAlert').find('li').on('click',function(){
        var data = $(this).attr('data');
        alert(data);
        var addpiao = {
            'role': '{{$joinInfo['role']}}',
            'rid' : '{{$joinInfo['rid']}}',
            'mid' : '{{$joinInfo['mid']}}',
            'type': 2,
            'piao': data,
        };
        ws.send(JSON.stringify(addpiao));
        $('.parentAlert').hide();
    })
</script>
</html>